<template>
  <div class="bg-bg-color overflow-hidden">
    <div class="mt-8 lg:mt-12 box-border px-5 pb-5 lg:pb-0 lg:mx-auto lg:w-100">
      <!-- payment -->
      <div
        class="flex lg:mb-3 lg:flex-row py-2 lg:py-5 lg:border-y-[.5px] lg:border-y-[#4e4e4e37] items-center flex-col justify-center lg:justify-start">
        <p class="text-sm text-white mb-4 lg:mr-3 lg:mb-0 whitespace-nowrap">
          {{ $mt('SUPPORT PAYMENTS :') }}
        </p>
        <div class="flex items-center justify-center">
          <WImage
            v-for="(item, i) in payTypeList"
            :key="i"
            class="h-5 mr-2 object-contain"
            height="20"
            width="80"
            :alt="`${$mt('payment support')} ${item.alt}`"
            :src="useAsset(item.img)" />
        </div>
      </div>
      <!--h5 折叠面板-->
      <div class="lg:hidden mt-5">
        <van-collapse v-model="activeNames" :border="false">
          <van-collapse-item v-for="(item, i) in moreList" :key="i" :title="item.text" :name="String(i)">
            <!-- <template #right-icon></template> -->
            <nuxt-link
              external
              no-prefetch
              class="mt-1 block py-0.5"
              v-for="(sItem, index) in item.children"
              target="_blank"
              :href="$localePath(sItem.link)">
              {{ sItem.title }}
            </nuxt-link>
          </van-collapse-item>
        </van-collapse>
      </div>
      <!--pc-->
      <div class="mt-9 lg:flex items-center">
        <!-- list -->
        <div class="mb-5 mt-5 hidden lg:flex items-start text-xs">
          <div class="mr-10 flex flex-col" v-for="(item, index) in moreList" :key="index">
            <strong class="mb-3 font-[600] text-[#fff]">{{ item.text }}</strong>
            <a
              target="_blank"
              class="text-xs underline leading-5 text-gray-light"
              :href="$localePath(sItem.link)"
              v-for="(sItem, i) in item.children"
              :key="i">
              {{ sItem.title }}
            </a>
          </div>
        </div>
        <!-- 下面 -->
        <div
          class="box-border flex w-full lg:w-[unset] flex-col items-center justify-center px-5 text-center lg:ml-auto lg:mr-40">
          <p class="mb-2.5 text-sm text-[#fff]">{{ $mt('Stay Updated With Us') }}</p>
          <div class="flex items-center">
            <a
              v-for="item in linkList"
              target="_blank"
              class="mr-3"
              :href="item.link || '#'"
              rel="noreferrer noopener nofollow">
              <WImage
                class="h-7 w-7"
                style="filter: invert(100%)"
                alt="social media icon"
                :src="useAsset(item.img)"
                width="25px"
                height="25px" />
            </a>
          </div>
          <a
            href="https://raw.githubusercontent.com/Vi-jay/bit_assets/main/BitTopup.apk"
            target="_blank"
            rel="noreferrer noopener nofollow">
            <WImage
              alt="Download BitTopup App"
              width="100px"
              height="34px"
              class="mx-auto mt-4 product-poster--small"
              :src="useAsset('pc-home/icons/download.webp')" />
          </a>
        </div>
      </div>
    </div>
    <!-- 最下面 -->
    <footer class="text-xs leading-5 text-[#fff] text-center opacity-60 pb-6 lg:pb-10">
      <p>TOPCOSMOS TECHNOLOGY LIMITED</p>
      <p>UNIT A17, 29/F, LEGEND TOWER, NO.7 SHING YIP STREET, KWUN TONG, KOWLOON, HONG KONG</p>
      <!--      <p class="text-xs px-4">-->
      <!--        We use Microsoft Clarity to improve our site. Your use implies consent to data collection by us and Microsoft,-->
      <!--        detailed in our-->
      <!--        <a class="link" href="/privacy.html">privacy statement</a>-->
      <!--      </p>-->
      <p>BUSINESS COOPERATION: ibittopup@gmail.com</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import WImage from '~/components/logic/WImage.vue'
import { useAsset } from '~/utils'

const { $mt } = useCommonPlugin()
const activeNames = ref(['0', '1', '2'])
const linkList = ref([
  {
    img: 'pc-home/icons/icons8-facebook-144_format.webp',
    link: 'https://www.facebook.com/p/BitTopup-61555736777305',
  },
  {
    img: 'pc-home/icons/icons8-linkedin-144_format.webp',
    link: 'https://www.linkedin.com/in/bittopup/',
  },
  {
    img: 'pc-home/icons/icons8-tiktok-144_format.webp',
    link: 'https://www.tiktok.com/@bittopup',
  },
  {
    img: 'pc-home/icons/icons8-x-144_format.webp',
    link: 'https://x.com/ibittopup',
  },
  {
    img: 'pc-home/icons/icons8-youtube-144_format.webp',
    link: 'https://www.youtube.com/channel/UC35TKCGzo375NWm6IYFHiRA',
  },
  {
    img: 'pc-home/icons/icons8-telegram-150_format.webp',
    link: 'https://t.me/+9TWTGq0RSPc2M2Y1',
  },
  {
    img: 'pc-home/icons/icons8-whatsapp-144_format.webp',
    link: 'https://chat.whatsapp.com/LCQUL7hrVnx9HSVVmY0XR4',
  },
])
const payTypeList = ref([
  { alt: 'CryptoPay', img: 'pc-home/crypto-pay.png' },
  { alt: 'PayerMax', img: 'pc-home/payermax-pay.png' },
  { alt: 'VisaMaster', img: 'pc-home/visa.webp' },
])
const moreList = ref([
  {
    text: $mt('About BitTopup'),
    children: [
      {
        title: $mt('About Us'),
        link: '/bittopup_about_us.html',
      },
      {
        title: $mt('Support'),
        link: '/bittopup_support.html',
      },
      {
        title: $mt('Contact Us'),
        link: '/contact_us_bittopup.html',
      },
    ],
  },
  {
    text: $mt('Shopping'),
    children: [
      {
        title: $mt('Return Policy'),
        link: '/bittopup_return_policy.html',
      },
      {
        title: $mt('Shipping Policy'),
        link: '/bittopup_shipping_policy.html',
      },
    ],
  },
  {
    text: $mt('Legal'),
    children: [
      {
        title: $mt('Service'),
        link: '/service.html',
      },
      {
        title: $mt('Privacy'),
        link: '/privacy.html',
      },
    ],
  },
])
</script>

<style scoped lang="scss">
:deep(.van-cell) {
  background-color: unset;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}

:deep(.van-collapse-item--border:after) {
  display: none;
}

:deep(.van-collapse-item) {
  border-bottom: 0.5px solid rgba(149, 145, 145, 0.212);
}

:deep(.van-collapse-item__content) {
  background-color: unset;
  font-size: 12px;
}

:deep(.van-cell:after) {
  display: none;
}

:deep(.van-cell__right-icon) {
  font-size: 12px !important;
}

:deep(.van-collapse-item__content) {
  padding-top: unset;
}
</style>
